<template>
  <div class="education-select">
    <!-- 选择思政元素 -->
    <el-cascader
      class="ele-cascader"
      v-model="value"
      :options="options"
      :props="props"
      @change="handleChange"
      filterable
      style="width: 90%"
    ></el-cascader>
    <div class="education-add">
      <span
        @click="addEducation()"
        class="el-icon-circle-plus"
        title="添加思政元素"
      ></span>
    </div>
    <Add />
  </div>
</template>
<script>
import { sysIdeologicalEducationQuery } from "@/api/admin/system/sysIdeologicalEducation.js";
import Bus from "@/utils/bus.js";
export default {
  components: {
    Add: () => import("./add.vue"),
  },
  data() {
    return {
      value: [],
      options: [],
      educationData: [],
      props: {
        children: "childList",
        label: "name",
        value: "id",
        expandTrigger: "hover",
        emitPath: false,
        multiple: true,
        // checkStrictly: false,
        checkStrictly: true
      },
    };
  },
  props: ["defaultValue"],
  watch: {
    defaultValue() {
      this.getTree();
    },
  },
  mounted() {
    this.getTree();
  },
  methods: {
    getTree() {
      sysIdeologicalEducationQuery({ type: 1, auditStatus: 2 }).then((res) => {
        this.options = res.data.data;
        this.educationData = res.data.data;
        this.options.forEach((v) => {
          v.childList.forEach((m) => {
            m.childList.forEach((n) => {
              delete n.childList;
            });
          });
        });
        this.value = this.defaultValue;
      });
    },
    handleChange(value) {
      this.$emit("e-eduData", value);
    },
    addEducation() {
      Bus.$emit("showAddDialog_EducationAdd", this.educationData);
    },
  },
};
</script>
<style scoped>
.education-select {
  position: relative;
}
.education-add {
  position: absolute;
  right: 0;
  top: 6px;
  width: 30px;
  height: 30px;
  text-align: center;
}
.education-add span {
  text-align: center;
  font-size: 28px;
  color: #67c23a;
  cursor: pointer;
}
/* .el-cascader-panel  .el-checkbox{
  display:none;
} */
</style>